WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - PointMarkers in MVVM
Worked Example - PointMarkers in MVVM

Worked Example: PointMarkers in MVVM

There are two ways that a point-marker can be added, styled and manipulated in SciChart via MVVM:

  1. You can add a point-marker to the RenderableSeriesViewmodel.PointMarker property
  2. You can add a Point-Marker to the style assigned to the RenderableSeries

View (XAML)

PointMarkers in MVVM
Copy Code 
<UserControl x:Class="WpfApplication3.HelloSciChartWorld"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             xmlns:local="clr-namespace:WpfApplication3"
             mc:Ignorable="d"
             d:DesignHeight="400" d:DesignWidth="600"
             Background="#171717">
    <UserControl.Resources>
        <local:HelloSciChartWorldViewModel x:Key="viewModel"/>

        <Style TargetType="s:FastLineRenderableSeries" x:Key="LineSeriesStyle0">
            <Setter Property="StrokeDashArray" Value="5 5"/>
            <Setter Property="StrokeThickness" Value="2"/>
            <Setter Property="Stroke" Value="Orange"/>
            <Setter Property="PointMarkerTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <s:EllipsePointMarker Width="5" Height="5"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>
   
    <Grid DataContext="{StaticResource viewModel}">

        <s:SciChartSurface RenderableSeries="{s:SeriesBinding SeriesViewModels}">
            <s:SciChartSurface.XAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis GrowBy="0.1, 0.1"/>
            </s:SciChartSurface.YAxis>

        </s:SciChartSurface>
    </Grid>
</UserControl>

ViewModel

PointMarkers in MVVM
Copy Code 
public class HelloSciChartWorldViewModel : INotifyPropertyChanged
{
    private readonly ObservableCollection<IRenderableSeriesViewModel> _seriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();
    private readonly XyDataSeries<double, double> _xyData = new XyDataSeries<double, double>();

    public event PropertyChangedEventHandler PropertyChanged;

    public HelloSciChartWorldViewModel()
    {
        for (int i = 0; i < 100; i++)
        {
            _xyData.Append(i, Math.Sin(i * 0.2));
        }

        SeriesViewModels.Add(new LineRenderableSeriesViewModel() { DataSeries = _xyData, StyleKey = "LineSeriesStyle0" });
    }

    public ObservableCollection<IRenderableSeriesViewModel> SeriesViewModels
    {
        get { return _seriesViewModels; }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }           
    }
}

Alternative ViewModel – add PointMarker to RenderableSeriesViewModel

Alternatively, simply add a PointMarker to the RenderableSeriesViewModel as follows:

Alternative ViewModel – add PointMarker to RenderableSeriesViewModel
Copy Code 
SeriesViewModels.Add(new LineRenderableSeriesViewModel()
{
   DataSeries = _xyData,
   StyleKey = "LineSeriesStyle0" ,
   PointMarker = new EllipsePointMarker() { Width = 5, Height = 5},
});